<template>
  <div class="flex-main">
    <div class="flex-body">
      <div class="m-list">
        <div class="list-items">
          <div class="m-logo"></div>
          <p class="m-text">总奖励</p>
          <p class="m-text m-reward">{{TotalShare}}</p>
        </div>
        <div class="list-items">
          <div class="m-logo"></div>
          <p class="m-text">已提现花瓣</p>
          <p class="m-text m-exchange">{{ExchangeShare}}</p>
        </div>
        <div class="list-items">
          <div class="m-logo"></div>
          <p class="m-text">未提现花瓣</p>
          <p class="m-text m-remain">{{SurplusShare}}</p>
        </div>
      </div>
      <div class="m-date">
        <div class="box-bd">
          <h3>日期</h3><span class="date"></span>
        </div>
        <s-time ref="selectTime" @searchTime="searchTime"></s-time>
      </div>

      <div class="m-tjtable">
        <div class="bd-li" v-for="(item,key) in tjtable">
          <div class="m-title">
            <span class="icon"></span>
            <p>推荐奖励</p>
          </div>
          <div class="m-head">
            <p>推荐奖励</p>
            <p>￥{{item.ShareChange}}</p>
          </div>
          <div class="m-text">
            <p>推荐下属</p>
            <p>{{item.Name}}</p>
          </div>
          <div class="m-text">
            <p>推荐时间</p>
            <p>{{item.issuetime}}</p>
          </div>
        </div>
      </div>
      <div class="m-table">
        <div class="bd-li" v-for="(item,key) in table">
          <div class="m-title">
            <span class="icon"></span>
            <p>奖励兑换</p>
          </div>
          <div class="m-head">
            <p>兑换金额</p>
            <p>￥{{item.money}}</p>
          </div>
          <div class="m-text">
            <p>提现状态</p>
            <p>{{item.status}}</p>
          </div>
          <div class="m-text">
            <p>提现时间</p>
            <p>{{item.createTime}}</p>
          </div>
        </div>
      </div>
      <div class="m-box">
        <div class="bd-li" v-for="(item,key) in box">
          <div class="m-title">
            <span class="icon"></span>
            <p>购买消费</p>
          </div>
          <div class="m-head">
            <p>消费奖励</p>
            <p>{{item.ShareChange}}</p>
          </div>
          <div class="m-text">
            <p>消费项目</p>
            <p>{{item[0].PGCnameStr}}</p>
          </div>
          <div class="m-text">
            <p>消费客户</p>
            <p>{{item[0].userName}}</p>
          </div>
          <div class="m-text">
            <p>消费金额</p>
            <p>￥{{item[0].Fmoney}}</p>
          </div>
          <div class="m-text">
            <p>消费时间</p>
            <p>{{item[0].SaleDate}}</p>
          </div>
        </div>
      </div>
      <no-data v-if="box.length==0 && tjtable.length==0 && table.length==0"></no-data>
    </div>
    <footer-nav class="flex-bottom" :title="4"></footer-nav>
  </div>
</template>
<script>
  import selectTime from '@/components/selectTime';
  import {
    getRewardList,
  } from "@/api/mine.js";
  export default {
    name: '',
    data() {
      return {
        CustomerID: this.$utils.uid,
        start: '',
        end: '',
        box: [],
        tjtable: [],
        table: [],
        ExchangeShare: 0,
        SurplusShare: 0,
        TotalShare: 0,
      }
    },
    methods: {
      searchTime(data) { //子组件点击确认后传值并执行事件
        console.log(data)
        var data = {
          customer_id: this.CustomerID,
          start: data.startTime + ' 00:00',
          end: data.endTime + ' 23:59',
        }
        this.rewardList(data);
      },
      //获取奖励明细
      rewardList(data) {
        getRewardList(data).then(res => {
          this.tjtable = res.tjList;
          this.table = res.applyList;
          this.box = res.list.data;
          this.ExchangeShare = res.ExchangeShare;
          this.SurplusShare = res.SurplusShare;
          this.TotalShare = res.TotalShare;
        }).catch(error => {
          Toast(error.msg);
        });
      },
    },
    mounted() {
      var data = {
        customer_id: this.CustomerID
      }
      this.rewardList(data);
    },
    components: {
      's-time': selectTime
    }
  }

</script>
<style lang="less" scoped src="@/less/mine/reward.less"></style>
